<template>
  <div>
        <div>
    <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
 
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  style="display:flex;justify-content:center">
  <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
  <el-menu-item><img src="../img/logo.png" @click="gotoindex()"></el-menu-item>
  <el-menu-item @click="gotoindex()">首页</el-menu-item>
  <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2" ></i>购物车</el-menu-item>
  <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
  <el-menu-item index="6" @click="order">我的订单</el-menu-item>
  <el-menu-item index="7" @click="address">收货地址</el-menu-item>
  <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
  <el-menu-item index="9" @click="myShop">我的</el-menu-item>
</el-menu>
</div>

<div> 
  <span style="font-size:20px;margin-left:400px;margin-top:120px">用户消费详情:</span>
  <el-table
    :data="this.bothDetailList"
    style="width:50%;margin-left:400px;margin-top:50px"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="balanceDTime"
      label="生成时间"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="balanceDMoney"
      label="充值/消费金额"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="balanceDBalance"
      label="用户余额"
      >
    </el-table-column>
  </el-table>

  </div>
  </div>

</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data(){
    return{
    savelist:[],
    paylist:[],
    date: '',
    activeIndex2:"0",
    userId:"",
    reverse:false,
    timestamp:"",
    bothDetailList:[],
    bothList:[],
    balanceDTime:""
    }
  },
  mounted() {
    //is user
    
    let jsonUser= sessionStorage.getItem("user")
    console.log(jsonUser)
    if(jsonUser==''||null==jsonUser){
      this.$message.warning("请先登录")
      this.$router.push("/")
    }else {
      //json String to  json object
      let jsonObj= JSON.parse(jsonUser)
      this.userName = jsonObj.userName
      this.userId= jsonObj.userId
      console.log(this.userId)
    }
    
  },
  methods:{
    findAllBalanceByTime(){
      this.$axios.get('/api/save/findBalanceDetailSaveByTime/'+this.balanceDTime).then(
        r=>{
          console.log(r.data)
        }
      )
    },
   findAllBalanceDetail(){
    this.bothDetailList=[]
    let jsonUser= sessionStorage.getItem("user")
    let jsonObj = JSON.parse(jsonUser)
    this.userId = jsonObj.userId
    this.userName = jsonObj.userName
    console.log(this.userId)
      this.$axios.get("/api/save/findBalanceDetailByUserId/"+this.userId).then(
        r=>{
          for(let bothlist of r.data){
            let m = "+" +bothlist.balanceDMoney/100
            bothlist.balanceDMoney=m
            bothlist.balanceDBalance=bothlist.balanceDBalance/100
            this.bothDetailList.push(bothlist)
          }
      
        }
        )
      this.$axios.get("/api/pay/findBalanceDetailByUserId/"+this.userId).then(
        r=>{
          for(let bothlist of r.data){
            let m = "-" +bothlist.balanceDMoney/100
            bothlist.balanceDMoney=m
             bothlist.balanceDBalance=bothlist.balanceDBalance/100
            this.bothDetailList.push(bothlist)
          }
          
        }
        )
        console.log(this.bothDetailList)

    },
   
gotoindex(){
        this.$router.push("/ShopIndex")
      },
      order(){this.$router.push('/UserOrder')
      },
       address(){this.$router.push('getGoodsAddress')
      },
      pay(){this.$router.push('/deposit')
      },
      car(){
        this.$router.push('/ShopCar')
      },
      dposistdetil(){
        this.$router.push('/depositDetail')
      },
      gotoGoodsDetail(){
        
        this.$router.push('/ShopIndexDetail')
      },
      addShopCar(){
        this.$router.push('/ShopCar')
      },
      myShop(){
        this.$router.push('/user')
      }
  },
  created(){
    this.findAllBalanceDetail()
    
  }
}
</script>

<style>
.el-timeline-item{
  width: 500px;
}
</style>